<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>舆情情况</title>
    
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <!-- <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> -->
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	<!-- <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> -->
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
</head>
<body class="fixed-sidebar full-height-layout gray-bg">
<div class="wrapper wrapper-content">
       <div class="btn-group hidden-xs" role="group">
			<button type="button" class="btn btn-outline btn-default" th:onclick="'javascript:batchRemove()'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon glyphicon-record">时间幅度：</i>
	        </button>
			<button type="button" class="btn btn-outline btn-default" onclick="window.location.href='http://localhost/system/wordweek'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon">近七天内</i>
	        </button>
	        <button type="button" class="btn btn-outline btn-default" onclick="window.location.href='http://localhost/system/wordmonth'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon">近一个月</i>
	        </button>
	        <button type="button" class="btn btn-outline btn-default" onclick="window.location.href='http://localhost/system/word'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon">近三个月</i>
	        </button>        
        </div>
</div>
<div class="wrapper wrapper-content">
	<div class="row">
	<div class="col-sm-12">
		<div class="ibox float-e-margins">
             <div class="ibox-title">
                 <h5>搜索词词云分析</h5>
			</div>
            <div class="ibox-content">
                  <div id="mountNode"></div>
<script>
function getTextAttrs(cfg) {
  return _.assign({}, {
    fillOpacity: cfg.opacity,
    fontSize: cfg.origin._origin.size,
    rotate: cfg.origin._origin.rotate,
    text: cfg.origin._origin.text,
    textAlign: 'center',
    fontFamily: cfg.origin._origin.font,
    fill: cfg.color,
    textBaseline: 'Alphabetic'
  }, cfg.style);
}

// 给point注册一个词云的shape
G2.Shape.registerShape('point', 'cloud', {
  drawShape: function drawShape(cfg, container) {
    var attrs = getTextAttrs(cfg);
    return container.addShape('text', {
      attrs: _.assign(attrs, {
        x: cfg.x,
        y: cfg.y
      })
    });
  }
});
$.getJSON('/ruoyi/word.js', function(data) {
  var dv = new DataSet.View().source(data);
  var range = dv.range('value');	
  var min = range[0];
  var max = range[1];
  dv.transform({
    type: 'tag-cloud',
    fields: ['x', 'value'],
    size: [window.innerWidth, window.innerHeight],
    font: 'Verdana',
    padding: 0,
    timeInterval: 5000, // max execute time
    rotate: function rotate() {
      var random = ~~(Math.random() * 4) % 4;
      if (random == 2) {
        random = 0;
      }
      return random * 90; // 0, 90, 270
    },
    fontSize: function fontSize(d) {
      if (d.value) {
        return (d.value - min) / (max - min) * (80 - 24) + 24;
      }
      return 0;
    }
  });
  var chart = new G2.Chart({
    container: 'mountNode',
    width: window.innerWidth-100,
    height: window.innerHeight-200,
    padding: 0
  });
  chart.source(dv, {
    x: {
      nice: false
    },
    y: {
      nice: false
    },
    value: {
    	alias: '权重值' // 设置属性的别名
      },
      category: {
    	  alias: '类别' // 设置属性的别名
        }
  });
  chart.legend(false);
  chart.axis(false);
  chart.tooltip({
    showTitle: false
  });
  chart.coord().reflect();
  chart.point().position('x*y').color('category').shape('cloud').tooltip('value*category');
  chart.render();
});
</script>
             </div>
         </div>
     </div>
    </div>
    </div>

</body>
</html>
